<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        padding: 50px;
    }
    
    .mydiv {
        height: 300px;
        width: 300px;
        margin-bottom: 20px;
        display: inline-block;
    }
    
    .case1 {
        padding: 1em;
        border: 1em solid transparent;
        /* background: linear-gradient(white, white), url('../stone-art.png');
        background-size: cover;
        background-clip: padding-box, border-box;
        background-origin: border-box; */
        background: linear-gradient(white, white) padding-box, url('../stone-art.png') border-box 0 / cover;
    }
    /* 当然，这个技巧还可以用在渐变图案上。举个例子，下面这段代码可以
    生成一种老式信封样式的边框： */
    /* background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; */
    
    .case2 {
        padding: 1em;
        border: 1em solid transparent;
        background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
    }
    /* 通过border-image 来实现： */
    /* 每当我们改变 border-image-slice 时，都需要同时修改 borderwidth
    来让它们相互匹配。
     由于我们不能在 border-image-slice 属性中使用 em 单位，只能把
    边框厚度指定为像素单位。
     条纹的宽度需要在色标的位置信息中写好，因此我们在改变条纹宽
    度时，需要修改四处。 */
    
    .case3 {
        padding: 1em;
        border: 16px solid transparent;
        border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
    }
    /* 蚂蚁行军效果 */
    
    @keyframes ants {
        to {
            background-position: 100%
        }
    }
    
    .case4 {
        padding: 1em;
        border: 1px solid transparent;
        background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
        animation: ants 12s linear infinite;
    }
    /* border-image 也有它强大的地方，尤其是在搭配渐变图案时更
是威力倍增。举个例子，假设我们需要一个顶部边框被裁切的效果，就像
一般的脚注那样。我们所需要的就是border-image 属性再加上一条由渐
变生成的垂直条纹，并把要裁切的长度在渐变中写好。边框线的粗细交给
border-width 来控制。代码看起来是这样的 */
    
    .case5 {
        border-top: .2em solid transparent;
        border-image: 100% 0 linear-gradient(90deg, currentColor 4em, transparent 0);
        /* background: linear-gradient(90deg, currentColor 4em, transparent 0); */
        padding-top: 1em;
    }
</style>

<body>
    <div class="mydiv case1"></div>
    <div class="mydiv case2"></div>
    <div class="mydiv case3"></div>
    <div class="mydiv case4"></div>
    <div class="mydiv case5">ddd</div>
</body>

</html>